<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="file" />
    <img id="img"  alt="">
  </body>
  <script>
    let file = document.getElementById("file");
   

    //  方案1


    file.onchange = function (e) {
     let file = e.target.files[0];
     let fileReader = new FileReader();
     fileReader.readAsDataURL(file); 
     fileReader.onload = function (evt) {
        console.log(evt.target.result);

        let img = document.getElementById('img');
        img.src = evt.target.result

      };

//   速度快  同步  
//   和当前的文档绑定  不跨平台  
      
    // file   做一个  file的映射  映射出来一个url   和当前的document绑定 

    // let url = URL.createObjectURL(file);
    // console.log(url)

    //   let img = document.getElementById('img');
    //     img.src = url



    };
  </script>
</html>
